<template>
  <div>
    <el-dialog
      :model-value="props.dialogVisible"
      title="选择用户"
      width="800px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form ref="searchParamsRef" :model="searchParams" @submit.prevent="search">
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="用户姓名：" prop="name">
              <el-input v-model="searchParams.name" clearable placeholder="请输入用户姓名" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户账号：" prop="account">
              <el-input v-model="searchParams.account" clearable placeholder="请输入用户账号" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="data-block">
        <el-table ref="multipleTableRef" :data="tableData" class="nr-table">
          <el-table-column type="selection" width="30"/>
          <el-table-column label="用户姓名" prop="name"></el-table-column>
          <el-table-column label="账号" prop="id"></el-table-column>
          <el-table-column label="手机号码" prop="rtsp"></el-table-column>
          <el-table-column label="所属项目" prop="rtsp"></el-table-column>
        </el-table>
        <el-pagination
          class="nr-page"
          v-model:current-page="searchParams.currentPage"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="searchParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="RoleSelectUserDialog">
import { ref, reactive, watch, ComponentInternalInstance, getCurrentInstance } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElTable } from 'element-plus'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['submit', 'update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: {}
  }
})

const searchParamsRef = ref<FormInstance>()
const searchParams = reactive({
  project: '',
  name: '',
  account: '',
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const tableData = ref<any>([
  { id: 1, name: '1', account: '1' }
])

watch(() => props.dialogVisible, async (newVal) => {
  if (newVal) {
    
  }
})

// 查询
const search = () => {

}

// 重置
const reset = () => {
  searchParamsRef.value?.resetFields()
}

// 分页跳转
const handleCurrentChange = (val: number) => {

}
const handleSizeChange = (val: number) => {

}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 关闭弹窗
const handleClose = () => {
  resetForm(searchParamsRef.value)
  // tableData.value = []
  proxy?.$emit('update:dialogVisible', false)
}

// 提交表单
const handleSubmit = async () => {

}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'
</style>
